<template>
  <div class="main">
    <div class="uc-header">
      <div class="back" @click="$router.back()">
        <img src="@/assets/img/back.png" />
      </div>
      <div class="title">{{ $t("Invitation") }}</div>
    </div>
    <div class="cont-tit">
      {{ $t("NVITEFRIENDS") }} <br />
      {{ $t("GETPERMANENTREBATE") }}
    </div>
    <div class="cont-tit-txt">
      {{ $t("getATotal") }}<br />
      {{ $t("profitReward") }}
    </div>
    <div class="imgbox"><img src="@/assets/img/invbass.png" /></div>
    <div class="mbs">
      {{ $t("MyInvitationCode") }}：{{ invite_code }}
      <div class="copy-btn" @click="copy(invite_code)">{{ $t("copy") }}</div>
    </div>

    <div class="btnlist">
      <!-- <div class="query-btn" @click="copyShow = true">
        <div class="query-btn-cont">Invite</div>
      </div> -->
      <div class="btnlist-item" @click="myRewardsShow = true">
        <div class="li-l">
          <img src="@/assets/img/history.png" />
          {{ $t("InvitationHistory") }}
        </div>
        <div class="li-r"><img src="@/assets/img/back.png" /></div>
      </div>
      <!-- <div class="btnlist-item" @click="myRewardsShow = true">
        <div class="li-l">
          <img src="@/assets/img/rewards.png" />
          My Rewards
        </div>
        <div class="li-r"><img src="@/assets/img/back.png" /></div>
      </div> -->
      <!-- <div class="btnlist-item" @click="tipsShow = true">
        <div class="li-l">
          <img src="@/assets/img/invitation-tips.png" />
          Tips
        </div>
        <div class="li-r"><img src="@/assets/img/back.png" /></div>
      </div> -->
    </div>

    <!-- my rewards -->
    <van-popup v-model="myRewardsShow" round position="bottom" closeable>
      <div class="uapopup myRewardsShowbox">
        <div class="head">{{ $t("MYREWARDS") }}</div>
        <div class="brdbcnn">
          <div class="brdbcnn-item">
            <div class="li-l">
              <img src="@/assets/img/rewards-icon.png" />
              {{ a_invite_reward }}
            </div>
            <div class="li-r">{{ $t("TotalReward") }}</div>
          </div>
        </div>
        <template v-if="a_invite_recode_lt.length">
          <div class="list" :key="myRewardsShow">
            <div class="list-item head">
              <!-- <div class="li li-1">S/N</div> -->
              <div class="li li-2">{{ $t("ACCOUNT") }}</div>
              <div class="li li-3">{{ $t("REWARDS") }}</div>
              <div class="li li-4">{{ $t("TIME") }}</div>
            </div>
            <div class="bgf5">
              <div
                class="list-item"
                v-for="v in a_invite_recode_lt"
                :key="v.serial_num"
              >
                <!-- <div class="li li-1">
                  <div>{{ v.serial_num }}</div>
                </div> -->
                <div class="li li-2">
                  <div>{{ v.account }}</div>
                </div>
                <div class="li li-3">
                  <div>
                    <div class="icon"></div>
                    +{{ v.rewards }}
                  </div>
                </div>
                <div class="li li-4">
                  <div>
                    {{ getTime(v.invite_time) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="!a_invite_recode_lt.length">
          <div class="nodata">
            <img src="@/assets/img/default.jpg" />
            <p>{{ $t("noRecord") }}</p>
          </div>
        </template>
      </div>
    </van-popup>

    <!-- Invitation Record -->
    <van-popup v-model="invitationRecordShow" round position="bottom" closeable>
      <div class="uapopup InvitationRecord">
        <div class="head">{{ $t("INVITATIONRECORD") }}</div>
        <div class="ir-cont">
          <div class="brdbcnn">
            <div class="brdbcnn-item">
              <div class="li-l">
                <img src="@/assets/img/portrait.png" />
                {{ invite_reward }}
              </div>
              <div class="li-r">{{ $t("DirectInvitation") }}</div>
            </div>
            <div class="brdbcnn-item">
              <div class="li-l">
                <img src="@/assets/img/portrait.png" />
                {{ a_invite_reward }}
              </div>
              <div class="li-r">{{ $t("IndirectInvitation") }}</div>
            </div>
          </div>

          <div :class="['levelbox', { active: levelboxActive }]">
            <div @click="levelboxActive = !levelboxActive" class="levetxt">
              {{ LevelType }}
            </div>
            <div class="levelist">
              <div class="levelist-item" @click="levelChange('All', 0)">
                {{ $t("All") }}
              </div>
              <div class="levelist-item" @click="levelChange('Level1', 1)">
                {{ $t("Level1") }}
              </div>
              <div class="levelist-item" @click="levelChange('Level2', 2)">
                {{ $t("Level2") }}
              </div>
              <div class="levelist-item" @click="levelChange('Level3', 3)">
                {{ $t("Level3") }}
              </div>
            </div>
          </div>

          <template v-if="invite_recode_lt.length">
            <div class="list">
              <div class="list-item head">
                <div class="li li-2">{{ $t("ACCOUNT") }}</div>
                <div class="li li-4">{{ $t("TIME") }}</div>
                <div class="li li-1">{{ $t("S/N") }}</div>
              </div>
              <div class="bgf5">
                <div
                  class="list-item"
                  v-for="v in invite_recode_lt"
                  :key="v.serial_num"
                >
                  <div class="li li-2">
                    <div>{{ v.account }}</div>
                  </div>
                  <div class="li li-4">
                    <div>{{ getTime(v.invite_time) }}</div>
                  </div>
                  <div class="li li-1">
                    <div>{{ v.serial_num }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="!invite_recode_lt.length">
            <div class="nodata">
              <img src="@/assets/img/default.jpg" />
              <p>{{ $t("noData") }}</p>
            </div>
          </template>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="tipsShow" round position="bottom" closeable>
      <div class="uapopup tips">
        <div class="head">{{ $t("TIPS") }}</div>
        <div class="cont">
          <van-steps direction="vertical" :active="-1">
            <van-step v-for="v in 5" :key="v">
              <h3>{{ $t("TIPS1") }}</h3>
              <p>
                {{ $t("TIPS2") }}
              </p>
            </van-step>
          </van-steps>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="copyShow" round position="bottom" closeable>
      <div class="uapopup copy">
        <div class="head">{{ $t("SHARE") }}</div>
        <div class="cont">
          <div class="url">{{ share_url }}</div>
          <div class="butList">
            <div class="copybtn" @click="savePicture()">
              {{ saveFlag ? `${$t("Saving")}...` : $t("SavePicture") }}
            </div>
            <!-- <div class="saved">
              <div>Saved</div>
              <div>copied</div>
            </div> -->
            <div class="copybtn" @click="copy(share_url)">
              {{ $t("CopyLink") }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <div :class="['cardbox', { active: copyShow }]" id="superMap">
      <div class="cbc-txtbox">
        <p class="p1">{{ $t("GetRichBy") }}<br />{{ $t("playingGames") }}</p>
        <p class="p2">
          {{ $t("NoNeedToD") }}<br />
          {{ $t("justOpen") }} <br />{{ $t("andPlay") }}
        </p>
      </div>
      <div class="cbcont">
        <div class="cbc-l">
          {{ $t("codeRegister") }}<br />
          {{ $t("toReceiveGifts") }}
        </div>
        <div class="cbc-r">
          <div class="cbc-code" ref="cbcCode"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { copyText, getTime } from "@/utils/common";
import QRCode from "qrcodejs2";
import { httpMyRecord, httpMyReward, httpUserInvitation } from "@/http/api";
import html2canvas from "html2canvas";
import dayjs from "dayjs";
export default {
  name: "invitation",
  data() {
    return {
      myRewardsShow: false,
      invitationRecordShow: false,
      tipsShow: false,
      copyShow: false,

      invite_code: localStorage.getItem("invite_code"),
      // 我的奖励
      invite_people: 0, //邀请总人数
      invite_reward: 0, //邀请获得总奖励
      invite_recode_lt: [], //邀请列表
      // 邀请历史
      a_invite_people: 0, //邀请总人数
      a_invite_reward: 0, //邀请获得总奖励
      a_invite_recode_lt: [], //邀请列表

      share_url: "",
      saveFlag: false,

      levelboxActive: false,
      LevelType: "All",
    };
  },
  created() {
    this.getHttpMyRecord(0);
    this.getHttpMyReward();
    this.getHttpUserInvitation();
  },
  methods: {
    getTime,
    copy(txt) {
      copyText(txt);
      // this.$notify({ type: 'success', message: '复制成功' });
      this.$toast({ className: "z-9999", message: this.$t("Copied") });
    },
    // 保存图片
    savePicture() {
      if (this.saveFlag) return;
      this.saveFlag = true;
      setTimeout(() => {
        html2canvas(document.getElementById("superMap"), {
          backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
          useCORS: true, //支持图片跨域
          scale: 1, //设置放大的倍数
        }).then((canvas) => {
          let a = document.createElement("a");
          a.href = canvas.toDataURL("image/jpeg");
          a.download = "invitation";
          a.click();
          this.saveFlag = false;
          this.$toast({ className: "z-9999", message: "save success" });
        });
      }, 500);
    },
    // 格式化时间戳
    formatTime(arr) {
      return arr.map((item) => {
        return {
          ...item,
          invite_time: dayjs(item.invite_time * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
        };
      });
    },
    async getHttpMyRecord(level) {
      let res = await httpMyRecord({ current_page: 1, level });
      if (res.code == 0) {
        this.invite_people = res.data.invite_people || 0;
        this.invite_reward = res.data.invite_reward || 0;
        this.invite_recode_lt = res.data.invite_recode_lt || [];
        // this.invite_recode_lt = [{},{},{}];
      }
    },
    async getHttpMyReward() {
      let res = await httpMyReward({ current_page: 1 });
      if (res.code == 0) {
        this.a_invite_people = res.data.invite_people || 0;
        this.a_invite_reward = res.data.invite_reward || 0;
        this.a_invite_recode_lt = res.data.invite_recode_lt || [];
        // this.a_invite_recode_lt =  [{},{}];
      }
    },
    async getHttpUserInvitation() {
      let res = await httpUserInvitation({});
      if (res.code == 0) {
        this.invite_code = res.data.invitation || "";
        this.share_url = res.data.url || "";
        new QRCode(this.$refs.cbcCode, {
          text: this.share_url,
          width: 60,
          height: 60,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }
    },

    levelChange(type, level) {
      this.LevelType = type;
      this.levelboxActive = false;
      this.getHttpMyRecord(level);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./Invitation.less");

.nodata {
  padding-bottom: 100px;
}
</style>
